<style lang="css" scoped>
	.ivu-modal{
		height:700px;
		overflow: hidden;
	}
</style>
<template>
  <div>
    <Card>
			<p slot="title" style="height: 32px">
				<Button type="primary" @click="alertAdd">新增</Button>
			</p>
      <tables border ref="tables" editable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete" />
    </Card>
		<Modal v-model="modelshow" width="700" :styles="{top: '30px',height:'80%'}" @on-visible-change="doCancel"  @on-ok="onClickOk">
			<p slot="header" style="color:#2d8cf0;">
					<Icon type="information-circled"></Icon>
					<span>新增部门</span>
			</p>
			<Form ref="myForm" :model="formItems" :label-width="90">
				<FormItem label="菜单名称" prop="name">
					<Input v-model="formItems.name" placeholder="菜单名称"></Input>
				</FormItem>
				<FormItem label="父级菜单" prop="parentName">
					<Select v-model="formItems.sex" clearable placeholder='请选择父级菜单'>
						<Option :value="sexArr.man">办公室</Option>
						<Option :value="sexArr.woman">宣传科</Option>
						<Option :value="sexArr.woman">警务督察科</Option>
					</Select>
				</FormItem>
				<FormItem label="排序" prop="childage">
					<InputNumber :max="10000" :min="0" v-model="formItems.sort"></InputNumber>
				</FormItem>
			</Form>
		</Modal>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        { title: '部门名称', key: 'name', sortable: false, align: 'left' },
        { title: '排序', key: 'sort', editable: false, align: 'center' },
        {
          title: '操作',
          key: 'handle',
		  align: 'center',
          button: [
            (h, params, vm) => {
              return h('Button', {
                props: {
                  type: 'primary'
                },
                on: {
                  click: () => {
                    console.log(params)
                    this.formItems = this.tableData[params.index]
                    this.modelshow = true
                  }
                }
              }, '编辑')
            },
            (h, params, vm) => {
              return h('Button', {
                props: {
                  type: 'error'
                },
                style: {
                  marginLeft: '10px'
                },
                on: {
                  click: () => {
                    this.tableData.splice(params.index, 1)
                  }
                }
              }, '删除')
            }
          ]
        }
      ],
      tableData: [],
      modelshow: false,
      formItems: {
        name: '',
        sex: '男',
        age: 0,
        mobile: '',
        parentName: '',
        parentsex: '男',
        parentage: 0,
        childName: '',
        childsex: '男',
        childage: 0,
        rztime: ''
      },
      clickType: 'edit',
      sexArr: { man: '男', woman: '女' }
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    doCancel (data) {
      console.log(222333)
    },
    alertAdd () {
      this.formItems = {}
      this.modelshow = true
      this.clickType = 'add'
    },
    onClickOk () {
      console.log(this.formItems)
      if (this.clickType == 'add') {
        this.tableData.push(this.formItems)
      }
      console.log(this.tableData)
    }
  },
  mounted () {
    this.tableData = this.depatementData
  }
}
</script>

<style>

</style>
